{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
	<el-row class="ws-quote">
		<el-col :span="24" >
			系统设置
		</el-col>
	</el-row>
	<el-table :data="baseData" border stripe header-row-style="">
		<el-table-column label="配置项" width="260px" prop="name" align="center"></el-table-column>
		<el-table-column label="参数值">
			<template slot-scope="scope">

				<el-input v-model="scope.row.value" :placeholder="scope.row.remark" v-if="scope.row.type==='input'"></el-input>

				<input type="file" name="scope.row.field" @change="appUploads($event,scope.row)" v-if="scope.row.type==='app_uploads'">

				<el-switch v-model="scope.row.value" v-if="scope.row.type==='switch'"></el-switch>
			</template>
		</el-table-column>
		<el-table-column label="说明" prop="remark" align="center"></el-table-column>
	</el-table>
	<el-row class="p_y20">
		<el-col :offset="6" :span="8">
			<el-button type="primary" @click="_wspost('{:url('edit')}',{data:baseData})">更新配置</el-button>
		</el-col>
		
	</el-row>
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
	el:'#app',
	mixins:[wsMixins],
	data:{
		list:{$list->toJson()|raw},
		baseData:[
			// 站点配置
			{field:'member_title',name:'会员中心标题',type:'input',value:'会员中心',remark:'会员中心标题'},
			{field:'admin_title',name:'后台系统标题',type:'input',value:'后台系统',remark:'后台系统标题'},
			{field:'address',name:'公司地址',type:'input',value:'',remark:'公司、客服地址'},
			{field:'tel',name:'客服电话',type:'input',value:'',remark:'客服电话'},
			{field:'qq',name:'客服QQ',type:'input',value:'',remark:'客服QQ'},
			{field:'copyright',name:'版权所有',type:'input',value:'',remark:'版权所有'},
			{field:'client_message',name:'客户端反馈',type:'switch',value:false,remark:'是否开启客户端反馈消息'},


			// 系统配置
			{field:'qqmap_ak',name:'腾讯地图Key',type:'input',value:'',remark:'腾讯地图Key'},
			{field:'socket_host',name:'Socket服务器网关',type:'input',value:'',remark:'该网关用于任务指令、前端信息回馈等'},
			{field:'socket_host2',name:'Socket2服务器网关',type:'input',value:'',remark:'该网关用于同步界面的视频画面传输'},
			{field:'socket_code',name:'Socket秘钥',type:'input',value:'',remark:'请与IM/config.js(pwd项保持一致)'},

			//管理端配置
			{field:'manage_version',name:'管理端版本号',type:'input',value:'1',remark:'管理端版本号'},
			{field:'manage_app',name:'上传管理端App',type:'app_uploads',value:'',remark:'管理端'},
			
			//客户端配置
			{field:'version',name:'客户端版本号',type:'input',value:'1',remark:'客户端版本号'},
			{field:'app',name:'上传客户端App',type:'app_uploads',value:'',remark:'客户端'},

			//分身配置
			{field:'mult_version',name:'分身版本号',type:'input',value:'1',remark:'分身版本号'},
			{field:'mult_app',name:'上传分身App',type:'app_uploads',value:'',remark:'分身'},
		]
	},
	created(){
		this.init();
	},
	methods:{
		init(){
			this.baseData.forEach(item=>{
				this.list.forEach(v=>{
					if(v.field===item.field){
						item.id=v.id;
						if(v.type==='switch'){
							// 字符串转换
							v.value=v.value==='true';
						}
						item.value=v.value;
					}
				})
			});
		},
		// APP上传
		appUploads(e,row){
			let file=e.target.files[0];
			let formData=new FormData();
			formData.append('id',row.id);
			formData.append('file',file); // 'file' 可变 相当于 input 表单的name 属性
			formData.append('name',row.field);
			this.jqUpload("{:url('appUploads')}",formData,res=>{
				console.log(res);
			});
		},
	}
});
</script>
{/block}